<template>
  <div class="flexBetween" style="width:100%">
    <div class="leftMenu flexStart" style="width:50%;margin-right:43%">
      <div class="leftCell" @click="onClick(1)" :class="{activeCell:selsetFlag==1}">首页</div>
      <div class="leftCell" @click="onClick(2)" :class="{activeCell:selsetFlag==2}">实名制管理</div>
      <div class="leftCell" @click="onClick(3)" :class="{activeCell:selsetFlag==3}">考勤管理</div>
    </div>
    <div class="flexStart" style="width:50%;">
      
      <div class="leftCell" @click="onClick(4)" :class="{activeCell:selsetFlag==4}">工资支付</div>
      <!-- <div class="leftCell" @click="onClick(5)" :class="{activeCell:selsetFlag==5}">投诉管理</div> -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selsetFlag: 1
    }
  },
  mounted() {
    this.$store.commit('setMenu', this.selsetFlag)
  },
  methods: {
    onClick(val) {
      this.selsetFlag = val
      this.$store.commit('setMenu', this.selsetFlag)
      //   console.log(this.$store.state.selectMenu);
    }
  }
}
</script>

<style scoped>
.leftCell {
  width: 16.8rem;
  height: 3.1rem;
  color: #0efcff;
  font-size: 1.8rem;
  text-align: center;
  line-height: 3.1rem;
  cursor: pointer;
  background: url('../../../../../assets/img/noselect.png') no-repeat;
  background-size: 100%;
}
.leftCell:hover {
  background: url('../../../../../assets/img/activeSelect.png') no-repeat;
  background-size: 100%;
}
.activeCell {
  background: url('../../../../../assets/img/activeSelect.png') no-repeat;
  background-size: 100%;
}
.leftMenu {
  margin-left: -1.5rem;
}
</style>